<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入css 样式-->
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--    引入js -->
    <script src="/layui/layui.js"></script>
</head>
<body>
<div style="margin-top: 30px;margin-left: 20%;width: 60%">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">宠物名称：</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">生日:</label>
            <div class="layui-input-inline">
                <input type="text" name="birthday" class="layui-input" id="test1" width="100%" lay-verify="required"
                       autocomplete="off" placeholder="yyyy-MM-dd">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型:</label>
            <div class="layui-input-block">
                <input type="radio" name="type" value="猫" title="猫" checked="">
                <input type="radio" name="type" value="狗" title="狗">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">单行选择框</label>
            <div class="layui-input-block">
                <select id="sele" name="uid" lay-filter="aihao">
                    <option  value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品种：</label>
            <div class="layui-input-block">
                <input type="text" name="varieties" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-block">
                <button type="button"  class="layui-btn" id="test2">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <input hidden type="text" id="image" name="image">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介：</label>
            <div class="layui-input-block">
                <input type="text" name="info" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">新增宠物</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>

<script>
    var $
    layui.use(['form', 'laydate', 'upload'], function () {
        var upload = layui.upload;
        var form = layui.form,
            laydate = layui.laydate,
            $ = layui.$;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test2' //绑定元素
            , url: '/api/pets/fileupload.do' //上传接口
            , done: function (res) {
                console.log(res.data)
                $("#image").val(res.data)
            }
            , error: function () {

            }
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#test1' //指定元素
        });
        //提交
        form.on('submit(formDemo)', function (data) {
            console.log(data.field)
            //请求新增接口 Ajax post
            $.get("/api/pets/add.do", data.field, function (res) {
                console.log(res)
                //验证接口的返回 是否成功
                if (res.code == 0) {
                    layer.msg("亲，新增成功！");
                } else {
                    layer.msg(res.data);
                }
            });
            return false;
        });
        $.get("/api/user/selectAll.do", function (res){
            //验证接口的返回 是否成功
            if (res.code == 0) {
                console.log(res.data)
                var data = res.data
                for(a in data){
                    $("#sele").append("<option value='"+data[a].id+"'>"+data[a].username+"</option>")
                }
                layui.form.render("select");
            } else {
                layer.msg(res.data);
            }
        })
    });


</script>
</body>
</html>